<script>
	$(function() {
		$( "button#acceder" ).button({
			 icons: { primary: "ui-icon-locked" }
			 });
			 /*
        $( "button#acceder" ).click( function () {
			$("#login_form").submit()
			 });
			 */
	});
	
	
	
$(document).ready(function()
{
	$("#login_form").submit(function()
	{
		//remove all the class add the messagebox classes and start fading
		$("#mensaje").removeClass().addClass('ui-state-highlight').addClass('loading').text('verificando').fadeIn(1000);
		//check the username exists or not from ajax
		$.post("controler/controler.php?accion=login",{ usuario:$('#usuario').val(),clave:$('#clave').val(),rand:Math.random() } ,function(data)
        {
		  
		  $("#mensaje").removeClass('loading');
		  
		  if(data=='yes') //if correct login detail
		  {
		  	$("#mensaje").fadeTo(200,0.1,function()  //start fading the messagebox
			{ 

			  //add message and change the class of the box and start fading
			  $(this).html('Iniciando Sesión').addClass("loading").fadeTo(900,1,
              function()
			  { 
			
			
			  	 //redirect to secure page
				 document.location='';
			  });
			  
			});
		  }
		  else  if (data=='no')
		  {
		  	$("#mensaje").fadeTo(200,0.1,function() //start fading the messagebox
			{ 
			  //add message and change the class of the box and start fading
			  $(this).html('Los datos ingresados <br> son incorrectos').addClass('ui-state-error').fadeTo(900,1);
			});		
          }
		  else 
		  {
		  $("#mensaje").fadeTo(200,0.1,function() //start fading the messagebox
			{ 
			  //add message and change the class of the box and start fading
			  $(this).html(data).addClass('ui-state-error').fadeTo(900,1);
			});
		  }
		
				
        });
 		return false; //not to post the  form physically
	});
	//now call the ajax also focus move from 
	$("#password").blur(function()
	{
		$("#login_form").trigger('submit');
	});
});


</script>


<div id="login">
 
<div id="mensaje">

	<?php
	
	$mensaje = isset($_SESSION['mensaje']) ? $_SESSION['mensaje'] : "" ;
	$_SESSION['mensaje'] = "";
	
	echo $mensaje;
	
    //definida en funciones_d.php
    //si "mensaje" tien más de un caracter, lo muestra dentro de un div con los estilos.
    ?>
   </div>
   <br>
    
    

    <div class="cuadro-redondo">
    
    <form id="login_form" action="">
    
        <div class="campo">
        <label for="usuario">Usuario:</label>
        <input type="text" name="usuario" id="usuario"/>
        </div>
        
        <div class="campo">
        <label for="clave">Contraseña:</label>
        <input type="password" name="clave" id="clave"/>
        </div>
        
        <div class="campo">
        <button id="acceder" value="ACCEDER">ACCEDER</button>
        </div>
        
    </form>
    </div>
    
 
</div>